<template>
	<view>
		<slot></slot>
		<view class="mask" v-if="visible" @touchmove="moveHandle">
			<view class="picker-date">
				<view class="button">
					<view @click="changeVisible">取消</view>
					<view @click="confirm" :class="disable ? '' : 'disable'">确认</view>
				</view>
				<picker-view indicator-style="height: 50px; line-height: 50px;" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column v-for="(item, index) in range" :key="index">
						<view class="item" v-for="(item1, index1) in item" :key="index1">{{item1}} {{ index ? index === 1 ? '月' : '日' : '年' }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	const dayjs = require('dayjs');
	export default {
		name: 'XbdDatePickers',
		props: {
			visible: {
				type: Boolean,
				required: true
			},
			date: {
				type: String,
				default: ''
			},
			fields: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				range: [],
				value: [],
				disable: true
			};
		},
		watch: {
			date(val) {
				this.changeValue();
			}
		},
		methods: {
			moveHandle(e) {
				e.preventDefault();
				e.stopPropagation();
			},
			// 数据项发生改变
			bindChange(e) {
				this.disable = false;
				this.value = e.detail.value;
				if (this.fields === 'month' || this.fields === 'day') {
					if (this.range[0][e.detail.value[0]] === dayjs().year()) {
						this.setMonthArr(dayjs().month() + 1, 12);
					} else {
						this.setMonthArr(12);
					}
					// 判断如果 当前项为 undefined 就将当前项value 变为第一项
					if (!this.range[1][this.value[1]]) {
						this.$set(this.value, 1, 0);
					}
				}
				if (this.fields === 'day') {
					this.computedDayNum();
					// 判断如果 当前项为 undefined 就将当前项value 变为第一项
					if (!this.range[2][this.value[2]]) {
						this.$set(this.value, 2, 0);
					}
				}
				this.disable = true;
			},
			// 弹框隐藏
			changeVisible() {
				this.$emit('update:visible', !this.visible);
				this.changeValue();
			},
			// 确认
			confirm() {
				if (this.disable) {
					this.$emit('update:visible', !this.visible);
					this.$nextTick().then(() => this.setDate());
				}
			},
			// 获取最终确认返回的时间
			setDate() {
				let date = [];
				console.log(this.value,'this.value')
				this.value.forEach((item, index) =>{

					console.log(this.range[index][item],'this.range[index][item]')
 					date.push(this.range[index][item] >= 10 ? this.range[index][item] : '0' + this.range[index][item])
				})
				console.log(date)
				this.$emit('setDate', date.join('-'));
				// this.date = date.join('-');
			},
			// 设置年那一列的数组
			setYearArr() {
				let newYear = dayjs().year();
				const arr = [];
				arr.push(newYear++);
				arr.push(newYear);
				this.$set(this.range, 0, arr);
			},
			// 设置月列的数组
			setMonthArr(month, newMonth) {
				if (!newMonth) {
					const arr = [];
					for(let i = 1; i <= month;) {
						arr.push(i++);
					}
					this.$set(this.range, 1, arr);
				} else {
					const arr = []; 
					let inx = newMonth - month + 1;
					for(let i = 0; i < inx; i++) {
						arr.push(month++);
					}
					this.$set(this.range, 1, arr);
				}
				
			},
			// 获取月天数
			getDays(year, month) {
				let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
				if (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) {
					days[1] = 29;
				}
				return days[month - 1];
			},
			// 计算当前月的天数
			computedDayNum() {
				if (this.range[0][this.value[0]] === dayjs().year() && this.range[1][this.value[1]] === dayjs().month() + 1) {
					this.setDayArr(dayjs().date(), this.getDays(this.range[0][this.value[0]], this.range[1][this.value[1]]));
					
				} else {
					this.setDayArr(this.getDays(this.range[0][this.value[0]], this.range[1][this.value[1]]));
				}
			},
			// 设置天这一列
			setDayArr(day, newDay) {
				if (!newDay) {
					const arr = [];
					for(let i = 1; i <= day;) {
						arr.push( i++);
					}
					this.$set(this.range, 2, arr);
					console.log(this.range,'this.range')
				} else {
					const arr = [];
					let inx = newDay - day +1;
					for(let i = 1; i < inx; i++) {
						arr.push(1+day++);
					}
					this.$set(this.range, 2, arr);
				}
			},
			// 设置value
			setValue() {
				// 获取当前时间
				const newDate = new Date();
				console.log(newDate,'newDate')
				const newYear = newDate.getFullYear();
				
				// 获取用户传入的时间
				const date = (this.date && this.date !== '日期选择') ? new Date(this.date) : new Date();
				const year = date.getFullYear();
				const yearIdx = this.range[0].indexOf(year);
				this.value.push(yearIdx);
				
				if (this.fields === 'month' || this.fields === 'day') {
					// 年份对比 如果为当前年 则月份选择列表数据变更
					if (newYear === year) {
						const newMonth = newDate.getMonth() + 1;
						this.setMonthArr(newMonth, 12);
					}
					
					const month = date.getMonth() + 1;
					const monthIdx = this.range[1].indexOf(month);
					this.value.push(monthIdx);
				}
				if (this.fields === 'day') {
					const day = date.getDate()+1;
					this.computedDayNum();
					const dayInx = this.range[2].indexOf(day);
					this.value.push(dayInx);
				}
			},
			changeValue() {
				// 获取用户传入的时间
				const date = this.date ? new Date(this.date) : new Date();
				const year = date.getFullYear();
				const yearIdx = this.range[0].indexOf(year);
				this.$set(this.value, 0, yearIdx);
				
				if (this.fields === 'month' || this.fields === 'day') {
					const month = date.getMonth() + 1;
					const monthIdx = this.range[1].indexOf(month);
					this.$set(this.value, 1, monthIdx);
				}
				if (this.fields === 'day') {
					const day = date.getDate();
					const dayInx = this.range[2].indexOf(day);
					this.$set(this.value, 2, dayInx);
				}
			}
		},
		created() {
			// 准备年的数据
			this.setYearArr();
			// 准备月的数据
			if (this.fields === 'month' || this.fields === 'day') {
				this.setMonthArr(12);
			}
			if (this.fields === 'day') {
				// 计算天数 设置天数
				this.setDayArr(31);
			}
			// 判断当前选中
			this.setValue();
		}
	}
</script>

<style scoped lang="scss">
	.disable {
		color: #999988;
	}
	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
		background-color: rgba(0, 0, 0, 0.4);
		
		z-index: 9999;
	}
	.picker-date {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		background-color: #FFFFFF;
	}
	.button {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		padding: 0 50rpx;
		height: 80rpx;
		
		font-size: 32rpx;
		color: $uni-text-color;
		background-color: #F8F8F8;
		
		box-sizing: border-box;
		:nth-child(2) {
			color: $uni-color-primary;
		}
	}
	.picker-view {
	    width: 750rpx;
	    height: 520rpx;
	}
	.item {
	    height: 50px;
		line-height: 50px;
	    align-items: center;
		color: #000000;
	    justify-content: center;
	    text-align: center;
	}
</style>
